<template>
    <div class="login-log-container">
        <!-- 表单搜索项 -->
        <el-form :model="params">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="类型名称">
                        <el-input v-model="params.deviceTypeName" placeholder="请输入类型名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否启用">
                        <el-select v-model="params.enable" placeholder="选择是否" @change="handleStatusChange">
                            <el-option label="是" value="0" />
                            <el-option label="否" value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" plain :icon="Refresh" @click="handleReset">重置</el-button>

            </el-row>

        </el-form>
        <!-- 按钮组 -->
        <el-row class="button-group">
            <el-col :span="10">
                <div>
                    <el-button type="primary" :icon="Plus" plain @click=openInsert>新增</el-button>
                    <el-button type="success" plain :disabled="isSingleRowSelected" :icon="EditPen"
                        @click="openUpdateopenUpdate(selectedRow)">修改</el-button>

                    <el-button type="danger" plain :disabled="deleteDisabled" :icon="Delete"
                        @click="handleDelete">删除</el-button>
                    <el-button type="danger" plain :icon="Delete" @click="clearAll">清空</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="button-right">
                    <el-tooltip content="隐藏搜索" placement="top">
                        <el-button :icon="Search" circle />
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button :icon="Refresh" circle />
                    </el-tooltip>
                </div>
            </el-col>
        </el-row>
        <!-- 数据表格 -->
        <el-row>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="40" />
                <el-table-column prop="deviceTypeNo" label="设备类型编码" align="center" />
                <el-table-column prop="deviceTypeName" label="设备类型名称" sortable align="center" />
                <el-table-column prop="enable" label="是否启用" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.enable === '0' ? 'success' : 'danger'">
                            {{ scope.row.enable === '0' ? '是' : '否' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center" />
                <el-table-column label="操作" width="200px">
                    <template #default="scope">
                        <el-button :row="scope.row" type="primary" @click="openUpdate(scope.row)" text size="small"
                            :icon="EditPen">修改</el-button>
                        <el-button type="danger" text size="small" :icon="Delete" :row="scope.row"
                            @click="deleteItem(scope.row)">删除</el-button>



                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 分页组件 -->
        <el-row>
            <el-col :span="24">
                <div class="demo-pagination-block">
                    <el-pagination :current-page="params.currentPage" :page-size="params.pageSize" background
                        :default-page-size="params.pageSize" :page-sizes="pageSizes"
                        layout="total,sizes,prev,pager,next,jumper" :total="pageResult.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>




        <el-dialog v-model="dialogFormVisible" :title="title" width="800" @close="closeDialog">
            <el-form :model="form">
                <el-form-item label="设备类型编码" :label-width="formLabelWidth">
                    <el-input v-model="form.deviceTypeNo" autocomplete="off" />
                </el-form-item>
                <el-form-item label="设备类型名称" :label-width="formLabelWidth">
                    <el-input v-model="form.deviceTypeName" autocomplete="off" />
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注"
                        style="width: 100%;"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <el-select v-model="form.enable" placeholder="是否启用">
                        <el-option label="是" value="0" />
                        <el-option label="否" value="1" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmAdd">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import { deleteReversoContexts, getReversoContextsfind, insertReversoContexts, updateReversoContexts } from '@/apis/zs/index'
import { onMounted, ref, reactive, defineEmits } from 'vue';
import { Search, Refresh, Delete, Download } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const title = ref('')
let deviceTypeNo = ref([]) // 选中行的id数组
const tableData = ref([])   // 表格数据
const pageResult = ref({}) // 分页数据
const deleteDisabled = ref(true) // 删除按钮禁用状态,默认禁用

const openInsert = () => {
    dialogFormVisible.value = true
    title.value = '新增设备类型';
}
const openUpdate = (row) => {

    dialogFormVisible.value = true
    title.value = '修改设备类型';
    form.deviceTypeNo = row.deviceTypeNo
    form.deviceTypeName = row.deviceTypeName
    form.remark = row.remark
    form.enable = row.enable

}


//点击新增
const form = reactive({
    deviceTypeNo: '',
    deviceTypeName: '',
    enable: '',
    remark: ''
})

// 搜索参数
const params = ref({
    currentPage: 1,
    pageSize: 2,
    deviceTypeName: '',
    enable: ''
})
// 分页大小
const pageSizes = [2, 5, 8, 10]

onMounted(async () => {
    // 加载登录日志列表数据
    pageResult.value = await getReversoContextsfind(params.value)
    tableData.value = pageResult.value.records
})
/**
 * 更新状态
 * @param value 状态值
 */
const handleStatusChange = (value) => {
    params.value.status = value
}
/**
 * 处理搜索
 * @param params 搜索参数
 */
const handleSearch = async () => {
    pageResult.value = await getReversoContextsfind(params.value)
    tableData.value = pageResult.value.records
}
/**
 * 处理重置
 * @param params 搜索参数
 */
const handleReset = async () => {
    params.value = {
        currentPage: 1,
        pageSize: 2,
        deviceTypeName: '',
        enable: ''
    }
    pageResult.value = await getReversoContextsfind(params.value)
    tableData.value = pageResult.value.records
}
/**
 * 处理分页大小变化
 * @param size 当前分页大小
 */
const handleSizeChange = async (size) => {
    params.value.pageSize = size
    pageResult.value = await getReversoContextsfind(params.value)
    tableData.value = pageResult.value.records
}
/**
 * 处理当前页码变化
 * @param currentPage 当前页码
 */
const handleCurrentChange = async (currentPage) => {
    params.value.currentPage = currentPage
    pageResult.value = await getReversoContextsfind(params.value)
    tableData.value = pageResult.value.records
}
/**
 * 自定义删除选中行的处理方法
 * @param row 行数据
 */
const selectable = (row) => {
    // 表示所有行数据都可以被选中，可以自定义选择逻辑
    return true
}
const selectedRow = ref(null); // 新增一个响应式变量来存放选中的行数据
/**
 * 处理选中行变化
 * @param val 选中行的数组
 */
const handleSelectionChange = (val) => {
    deleteDisabled.value = !val.length
    deviceTypeNo.value = val.map(item => item.deviceTypeNo) // 使用map方法过滤出选中行的logId数组
    selectedRow.value = val[0]; // 新增一个响应式变量来存放选中的行数据
}
/**
 * 处理删除选中行
 * @param deviceTypeNo 选中行的id数组
 */
const handleDelete = () => {
    ElMessageBox.confirm(`是否确认删除访问编号为${deviceTypeNo.value.join(',')}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        await deleteReversoContexts(deviceTypeNo.value)
        pageResult.value = await getReversoContextsfind(params.value)
        tableData.value = pageResult.value.records
        deviceTypeNo.value = [] // 重置选中行的id数组
        ElMessage({ type: 'success', message: '删除成功' })
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' })
    })
}

const deleteItem = (row) => {
    ElMessageBox.confirm(`是否确认删除设备类型编码为${row.deviceTypeNo}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 调用删除接口，传入要删除的设备类型编号
        await deleteReversoContexts([row.deviceTypeNo]);

        // 从表格数据中移除当前行
        tableData.value = tableData.value.filter(item => item.deviceTypeNo !== row.deviceTypeNo);

        // 显示成功消息
        ElMessage({ type: 'success', message: '删除成功' });
    }).catch(() => {
        // 用户取消删除
        ElMessage({ type: 'info', message: '已取消删除' });
    });

};

const clearAll = () => {
    ElMessageBox.confirm(`是否确认清空所有登录日志数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        await deleteReversoContexts(deviceTypeNo.value)
        pageResult.value = await getReversoContextsfind(params.value)
        tableData.value = pageResult.value.records
        deviceTypeNo.value = [] // 重置选中行的id数组
        ElMessage({ type: 'success', message: '清空成功' })
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消清空' })
    })
}


// 确认新增
let confirmAdd = async () => {
    if (title.value == '新增设备类型') {
        await insertReversoContexts(form);
        ElMessage.success('新增成功');
    } else {
        await updateReversoContexts(form);
        ElMessage.success('修改成功');
    }
    dialogFormVisible.value = false;
    pageResult.value = await getReversoContextsfind(params.value)
    tableData.value = pageResult.value.records
};

// 重置表单数据
const resetForm = () => {
    form.deviceTypeNo = '';
    form.deviceTypeName = '';
    form.remark = '';
    form.enable = '0'; // 恢复默认选项
};
const closeDialog = () => {
    resetForm();
    title.value = '';
}


</script>

<style scoped>
.dividing-line {
    text-align: center;
}

.button-right {
    text-align: right;
}

.button-group {
    margin-top: 20px;
    margin-bottom: 10px;
}

.demo-pagination-block .el-pagination {
    justify-content: end;
    margin-top: 20px;
}
</style>
